<template>
    <el-row>
      <el-col :span="2">
        <div class="grid-content bg-purple-dark">&emsp;</div>
      </el-col>
      <el-col :span="20">
        <div class="grid-content bg-purple-dark">
          <el-container>
                <!-- excle表格导出按钮 -->
            <el-footer>
              <el-button type="success" round class="succbutton">导出</el-button>
            </el-footer>
            <el-main>
              <template>
                <!-- 加载还款信息表 -->
                <el-table :data="repayList"  style="width: 100%">
                  <el-table-column prop="debitId" label="借款表单编号" width="105">
                  
                  </el-table-column>
  
                  <el-table-column
                    prop="contractId"
                    label="合同签订ID"
                    width="105"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="debitStatus"
                    label="审核状态"
                    width="105"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="debitApproveLimit"
                    label="借款审批额度"
                    width="105"
                  >
                  </el-table-column>
            
                  <el-table-column
                    prop="debitSumExpires"
                    label="还款总期数"
                    width="105"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="debitPrincipal"
                    label="借款本金"
                    width="105"
                  >
                  </el-table-column>
                 
                  <el-table-column prop="operation1" label="操作" width="110">
                      <template slot-scope="scope" >
                      <el-button
                        type="primary"
                        round
                        size="mini"
                        style="width: 100px"
                        @click="toUserInfos(scope.row.contractId)"
                        >个人信息补充
                        </el-button >
                       </template>
  
                  </el-table-column>
  
                  <el-table-column prop="operation2" label="操作" width="105">
                    
                      <template slot-scope="scope">
                      <el-button
                        type="primary"
                        round
                        size="mini"
                        style="width: 90px"
                        @click="toDebitInfo(scope.row.contractId)"
                        >借款申请
                        </el-button >
                      </template>
  
                  </el-table-column>
  
                  <el-table-column prop="operation2" label="操作" width="105">
                    
                      <template slot-scope="scope">
                      <el-button
                        type="primary"
                        round
                        size="mini"
                        style="width: 90px"
                        @click="toDebitInfo(scope.row.contractId)"
                        >借款申请
                        </el-button >
                      </template>
                  </el-table-column>
  
                 
                </el-table>
              </template>
              <!-- ----------分页表单--------- -->
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="query.currentPage"
                :page-sizes="page.pageSizes"
                :page-size="query.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total"
              >
              </el-pagination>
            </el-main>
          </el-container>
        </div>
      </el-col>
      <el-col :span="2">
        <div class="grid-content bg-purple-dark">&emsp;</div>
      </el-col>
    </el-row>
  </template>
  
  <script>
  
  export default {
    data() {
      return {
  
        seen1:true,
        userAndPage: {
          //传给后端的值
          userId: "",
          currentPage: 1,
          debitStatus: "",
          pageSize: 20,
        },
        repayList: [], //还款列表
        topInfo: {
          contractNo: 1,
          repayPayable: 1,
          totalRepayAlready: 1,
        },
        title1: "合同数量",
        title2: "应还总额",
        title3: "已还本金",
        title4: "已还期数",
        title5: "本月应还",
        screenHeight: document.documentElement.clientHeight + "px",
        page: {
          pageSizes: [2, 5, 10],
          total: 0,
        },
        query: {
          currentPage: 1,
          pageSize: 2,
          realName: "",
          dateRange: [],
        },
        userinfo:{
  
        }
  
        
      };
    },
  
    methods: {
  
      //加载当前用户的借款申请表
      loadDebitList() {
    
        this.$axios.post("/debit/find",this.userAndPage).then((res) => {
          if (res.data.code == 200) {
  
            this.repayList = res.data.data.pageInfo.list;
            // console.log(this.repayList[0].debitId);
          } else {
            this.$message.error("操作错误");
          }
        });
      },
  
      loadRepayList() {
        this.$axios.post("/repay/query", this.userAndPage).then((res) => {
          if (res.data.code == 200) {
            this.repayList = res.data.data.repayList;
            this.topInfo = res.data.data.topInfo;
            this.page.total = res.data.data.total;
     
            for (let i = 0; i < this.repayList.length; i++) {
              this.repayList[i].productRate =
                this.repayList[i].productRate * 100 + "%";
            }
          } else {
            this.$message.error("操作错误");
          }
        });
      },
  
  
  
      // toContract(id) {
      //   // this.$axios.get("/contract/" + id).then((res) => {
      //   //           this.user = res.data.data.user;
      //   //           this.$router.push("/Contract");
      //   //       });
      //   this.$router.push("/Contract");
      // },
      toRepayInfo(id) {
        this.$router.push("/RepayInfo");
      },
  
      //开始信息填写路由
      toUserInfos(userId) {
        this.$router.push("/UserInfos");
      },
      //对借款材料提交
      toDocument(userId) {
        this.$router.push("/Document");
      },
  
  
      // toOverDue() {
        toDebitInfo(userId) {
        this.$router.push("/DebitInfo");
      },
      // },
      handleSizeChange(val) {
        //当每页数据改变时
        this.query.pageSize = val;
        this.loadRepayList();
      },
      handleCurrentChange(val) {
        //当点击页码时
        this.query.currentPage = val;
        this.loadRepayList();
      },
  
     
    },
  
    mounted() {
   
      this.loadDebitList();
    },
   
    beforeDestroy() {
      EventBus.$emit("aaa", 1);
    },
  };
  </script>
  <style >
  .succbutton {
      margin: 10px auto;
      margin-left: 60px;
  }
  
  </style>
  